<template>
  <div class="category-list">
    <div v-for="item in list.level1words" :key="item.keywordId">
      <div class="category-title">
        <h5>{{ item.keyword }}</h5>
        <div>
          <slot name="right-content"></slot>
        </div>
      </div>

      <div class="category-items">
        <div
          v-for="category in item.level2words"
          class="category-goods"
          :key="category.keywordId"
          @click="categoryClick(category.url)"
        >
          <div class="category-img">
            <img :src="category.imageUrl" />
          </div>
          <div class="category-name">{{ category.keyword }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryList",
  props: ["list"],
  mounted() {
    console.log(this.list);
  },
  methods: {
    categoryClick(url) {
      url = url.replace(/\/\/([a-zA-Z.]+)[a-z]/g, "");
      this.$http(url).then((res) => {
        if (res) {
          let parser = new DOMParser();
          let doc = parser.parseFromString(res, "text/html");
          console.log(doc);
          // let element = doc.querySelector(".search_prolist");
          this.$router.push({
            name: "categorySearch",
            params: {
              doc,
            },
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.category-list {
  padding-top: 20px;
  padding-bottom: 20px;
}
.category-list /deep/ > div + div {
  margin-top: 35px;
}
.category-title h5 {
  margin-top: 0;
  margin-bottom: 16px;
}
.category-img {
  text-align: center;
}
.category-img /deep/ img {
  width: 40px;
  height: 40px;
}
.category-goods /deep/ .category-name {
  color: #333;
  margin-top: 2px;
  font-size: 12px;
  text-align: center;
}
.category-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px 10px;
}
</style>